<template>
    <el-container id="container">
        <el-aside width="250px">
            <el-container id="top">
                <img style="width:50px;height:50px;margin-top:10px;border-radius:50%;background-color:#ffffff" src="~@/assets/logo.png"/>
                <div style="height:40px;line-height:40px;color:#ffffff;font-size:17px">
                    电商后台管理系统
                </div>
            </el-container>
            <el-menu 
            :default-active="$route.path"
            :unique-opened="true"
            router
            style="height:90%"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="selectItem">
              <el-sub-menu index="1">
                <template #title>
                    <el-icon><Document /></el-icon>
                    <span>订单管理</span>
                </template>
                <el-menu-item index="/home/order/0">普通订单</el-menu-item>
                <el-menu-item index="/home/order/1">秒杀订单</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                    <el-icon><Goods /></el-icon>
                    <span>商品管理</span>
                </template>
                <el-menu-item index="/home/goods/0">普通商品</el-menu-item>
                <el-menu-item index="/home/goods/1">秒杀商品</el-menu-item>
                <el-menu-item index="/home/goods/2">今日推荐</el-menu-item>
                <el-menu-item index="/home/goodCategory">商品分类</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                    <el-icon><User /></el-icon>
                    <span>店长管理</span>
                </template>
                <el-menu-item index="/home/ownerlist">店长列表</el-menu-item>
                <el-menu-item index="/home/ownerreq">店长申请审批列表</el-menu-item>
                <el-menu-item index="/home/ownerorder">店长订单</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                    <el-icon><Wallet /></el-icon>
                    <span>财务管理</span>
                </template>
                <el-menu-item index="/home/tradeinfo">交易明细</el-menu-item>
                <el-menu-item index="/home/tradelist">财务对账单</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                    <el-icon><Setting /></el-icon>
                    <span>基础管理</span>
                </template>
                <el-menu-item index="/home/data">数据统计</el-menu-item>
              </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-main style="padding:0">
            <!-- 添加一个通用的头部 -->
            <el-header style="margin:0;padding:0;" height="60px">
                <el-container style="background-color:#ffffff;margin:0;padding:0;height:60px">
                    <div style="margin:auto;margin-left:20px">
                        <h1>hi,欢迎登录！</h1>
                    </div>
                    <div style="margin:auto;margin-right:30px">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                            设置
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                            </span>
                            <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item @click="dialogFormVisible = true">修改密码</el-dropdown-item>
                                    
                                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>         
                    <!-- 修改密码弹框 -->
                    <el-dialog v-model="dialogFormVisible" title="修改密码" width="600px" @close="closeDialog">
                        <el-form 
                        :model="form"
                        ref="ruleFormRef"
                        :rules="rules"
                        status-icon>
                        <el-form-item label="旧密码：" :label-width="formLabelWidth" prop="oldPwd">
                            <el-input v-model="form.oldPwd" autocomplete="off" clearable 
                            type="password"
                            placeholder="请输入旧密码"
                            show-password/>
                        </el-form-item>
                        <el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPwd">
                            <el-input v-model="form.newPwd" autocomplete="off" clearable
                            type="password"
                            placeholder="请输入新密码"
                            show-password/>
                        </el-form-item>
                        <el-form-item label="确认新密码：" :label-width="formLabelWidth" prop="repeateNewPwd">
                            <el-input v-model="form.repeateNewPwd" autocomplete="off" clearable
                            type="password"
                            placeholder="请再次确认新密码"
                            show-password/>
                        </el-form-item>                                     
                        </el-form>
                        <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="submitForm()">确认修改</el-button>
                        </span>
                        </template>
                    </el-dialog>          
                </el-container>
            </el-header>
            <!-- 渲染具体的功能模块 -->
            <el-config-provider :locale="locale">
                <router-view></router-view>
            </el-config-provider>            
        </el-main>
    </el-container>
</template>

<script>
import Storage from '@/tools/Storage'
import Mock from '../../mock/Mock'
import { ElMessage, ElMessageBox, ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default {
    name: 'Home',
    components: {
        ElConfigProvider
    },
    data(){
        // 自定义密码校验规则
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else if(value.length < 6 || value.length > 10){
                callback(new Error('密码长度必须在6-10个字符'))
            }else{
                if (this.form.repeateNewPwd !== '') {
                    this.$refs.ruleFormRef.validateField('repeateNewPwd');
                }
                callback();
            }
        };
        var validateRepeateNewPwd = (rule, value, callback) => {
            if(value === ''){
                callback(new Error('请再次输入新密码'))
            }else if(value.length < 6 || value.length > 10){
                callback(new Error('密码长度必须在6-10个字符'))
            }else if(value !== this.form.newPwd){
                callback(new Error('新密码不一致！'))
            }else{
                callback()
            }
        };
        return {
            // 设置中文
            locale: zhCn,
            dialogFormVisible: false,
            formLabelWidth: '140px',
            form: {
                oldPwd: '',
                newPwd: '',
                repeateNewPwd: ''
            },
            rules: {
                oldPwd: [
                    {required: true, message: '请输入旧密码', trigger: 'change'},
                    {min: 6, max: 10, message: '密码长度必须在6-10个字符', trigger: 'change'}
                ],
                newPwd: [
                    {required: true, message: '请输入新密码', trigger: 'change'},
                    {validator: validatePass, trigger: 'change'}
                ],
                repeateNewPwd: [
                    {required: true, message: '请再次输入新密码', trigger: 'change'},
                    {validator: validateRepeateNewPwd, trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        selectItem(index,indexPath){
            console.log(index)
            console.log(Mock.getOrder(1))
            //this.$router.push({name: index})
        },
        logout(){
            ElMessageBox.confirm(
                '是否确认退出登录？',
                '提示',
                {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                }
            ).then(() => {
                ElMessage({
                    type: 'success',
                    message: '退出成功',
                })
                Storage.commit('clearUserInfo');
                this.$router.push({name:'login'})
            }).catch(() => {
                console.log('cancel Logout')
            })                    
        },
        submitForm() {            
            this.$refs.ruleFormRef.validate((valid) => {
                if (valid) {
                    ElMessage({
                        type: 'success',
                        message: '修改密码成功',
                        duration: 1500
                    })
                    setTimeout(() => {
                        // 关闭弹框
                        this.dialogFormVisible = false;
                    }, 1500);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 点击关闭时清空form表格的数据
        closeDialog () {
            this.$refs.ruleFormRef.resetFields();
        }
    }
}
</script>

<style scoped>
#container {
    height: 100%;
    width: 100%;
    position: absolute;
}

#title {
    text-align: center;
    color: azure;
    margin-top: 200px;
}

#top {
    background-color: #6f757a;
    height: 100px;
    line-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>